<div data-extend-template="layouts/partials/table.html">

  <div data-block="list-actions">
    <button type="button" class="btn btn-primary"
            ng-disabled="table.numSelected === 0"
            ng-show="isState('content-view.yum.filter.package_group.list') && permitted('edit_content_views', contentView)"
            ng-click="removePackageGroups(filter)">
      <span translate>Remove Package Group</span>
    </button>

    <button type="button" class="btn btn-primary"
            ng-disabled="table.numSelected === 0"
            ng-show="isState('content-view.yum.filter.package_group.available') && permitted('edit_content_views', contentView)"
            ng-click="addPackageGroups(filter)">
      <span translate>Add Package Group</span>
    </button>
  </div>

  <div data-block="table">
    <table class="table table-striped table-bordered" ng-class="{'table-mask': table.working}">

      <thead>
        <tr bst-table-head row-select>
          <th bst-table-column><span translate>Name</span></th>
          <th bst-table-column><span translate>Product</span></th>
          <th bst-table-column><span translate>Repository</span></th>
          <th bst-table-column><span translate>Description</span></th>
        </tr>
      </thead>

      <tbody>
        <tr bst-table-row ng-repeat="packageGroup in table.rows" row-select="packageGroup">
          <td bst-table-cell>{{ packageGroup.name }}</td>
          <td bst-table-cell>{{ packageGroup.repository.product.name }}</td>
          <td bst-table-cell>{{ packageGroup.repository.name }}</td>
          <td bst-table-cell>{{ packageGroup.description }}</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
